<template>
  <div class="autumn-container">
    <!-- 面包 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/dashboard' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/flow/listener/listenerList' }">监听列表</el-breadcrumb-item>
      <el-breadcrumb-item>监听信息</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片 -->
    <div class="autumn-center">
      <div class="edit-form">
        <el-form ref="editFormRef" size="large" label-width="90px" disabled :model="editForm">
          <el-row>
            <el-col :span="12">
              <el-form-item label="名称" prop="name">
                <el-input v-model="editForm.name" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="类型" prop="type">
                <el-radio-group clearable v-model="editForm.type">
                  <el-radio label="1">执行监听</el-radio>
                  <el-radio label="2">任务监听</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="事件" prop="event">
                <el-select v-model="editForm.event">
                  <el-option v-for="(value, key) in eventType" :key="key" :label="value" :value="key" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="值类型" prop="valueType">
                <el-select v-model="editForm.valueType">
                  <el-option v-for="(value, key) in valueTypes" :key="key" :label="value" :value="key" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="值" prop="value">
                <el-input v-model="editForm.value" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注" prop="remark">
                <el-input type="textarea" resize="none" v-model="editForm.remark" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <div class="form-foot-button">
          <el-button @click="cancel">返回</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { viewListener } from 'src/api/flow/listener'
import { eventTypes, valueTypes } from './type'

// 定义表单数据
const editForm = reactive({
  id: '',
  name: '',
  type: '1',
  event: '',
  valueType: '',
  value: '',
  remark: ''
})

// 填充表单数据
const eventType = ref({ ...eventTypes[editForm.type] })
const route = useRoute()
if (route.query.id) {
  const id = route.query.id as string
  viewListener(id).then(({ data }) => {
    Object.assign(editForm, data)
    eventType.value = { ...eventTypes[editForm.type] }
  })
}

// 监听
watch(() => editForm.type, (newVal: string) => {
  editForm.event = ''
  eventType.value = {}
  if (newVal) {
    eventType.value = { ...eventTypes[newVal] }
  }
})

// 关闭
const router = useRouter()
const cancel = function () {
  router.push('/flow/listener/listenerList')
}
</script>
